<template>
  <div id="emp">
    <!-- 头部标题 -->
    <div class="header">
      <span>首页 >> 员工管理</span>
    </div>
    <!-- 添加部门以及表格 -->
    <div class="empInner">
      <!-- 查询员工 -->
      <div class="addEmp">
        <div class="name">
          <span>姓名:</span>
          <el-input v-model="selectName" placeholder="请输入内容"></el-input>
        </div>
        <div class="dept">
          <span>部门:</span>
          <el-select v-model="selectDept" placeholder="请选择">
            <el-option
              v-for="item in Dept"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <el-button @click="queryemp" type="primary">查询</el-button>
      </div>
      <!-- 添加员工 -->
      <div class="newemp" @click="addEmpFormVisible = true">
        <i class="el-icon-circle-plus-outline"></i>
        <span>添加员工</span>
      </div>
      <!-- 表格 -->
      <div class="table">
        <template>
          <el-table :data="tableData" height="700" border style="width: 100%">
            <el-table-column
              prop="User.userInfoNo"
              label="员工编号"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="User.userName" label="员工姓名" width="150">
            </el-table-column>
            <el-table-column label="性别" width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.User.userInfoSex == 1">男</span>
                <span v-else>女</span>
              </template>
            </el-table-column>
            <el-table-column prop="Dept.deptName" label="所属部门" width="180">
            </el-table-column>
            <el-table-column
              prop="User.userInfoEntryTime"
              label="入职时间"
              width="180"
            >
            </el-table-column>
            <el-table-column label="操作列表" width="200">
              <template slot-scope="scope">
                <div class="tableBtn">
                  <!-- 删除按钮 -->
                  <el-popconfirm
                    title="确定删除此员工吗？"
                    @confirm="deleteEmp(scope.$index)"
                  >
                    <el-button
                      slot="reference"
                      type="danger"
                      icon="el-icon-delete"
                      circle
                    ></el-button>
                  </el-popconfirm>
                  <!-- 修改按钮 -->
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    circle
                    @click="clickEdit(scope.$index)"
                  ></el-button>
                  <!-- 查看详情按钮 -->
                  <el-button icon="el-icon-search" circle></el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <el-pagination
        :current-page.sync="assignGroupSearch.pageNo"
        :page-size="assignGroupSearch.rows"
        :page-sizes="[10, 20, 50, 100]"
        layout="sizes, total, prev, pager, next"
        :total="assignGroupSearch.total"
        @size-change="(e) => tableSizeChange(e)"
        @current-change="(e) => tableCurrentChange(e)"
      >
      </el-pagination>
      <!-- 添加员工弹窗 -->
      <div class="addForm">
        <el-dialog
          title="员工新增"
          width="650px"
          :visible.sync="addEmpFormVisible"
        >
          <!-- 员工编号 -->
          <div class="empId">
            <span>员工编号</span>
            <el-input
              v-model="addData.userInfoNo"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 员工姓名 -->
          <div class="empId">
            <span>员工姓名</span>
            <el-input
              v-model="addData.userName"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 员工电话 -->
          <div class="empId">
            <span>员工电话</span>
            <el-input
              v-model="addData.userInfoPhone"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 性别 -->
          <div class="empPrin">
            <span>性别</span>
            <el-select v-model="addData.userInfoSex" placeholder="请选择">
              <el-option
                v-for="item in sex"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 所属部门 -->
          <div class="empId">
            <span>所属部门</span>
            <el-select v-model="addData.dept" placeholder="请选择">
              <el-option
                v-for="item in Dept"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 入职时间 -->
          <div class="empId">
            <span>入职日期</span>
            <el-date-picker
              v-model="addData.userInfoEntryTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <!-- 底部按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="addEmpFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addEmp()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 修改部门信息弹窗 -->
      <div class="addForm">
        <el-dialog
          title="编辑部门信息"
          width="650px"
          :visible.sync="editEmpFormVisible"
        >
          <!-- 员工编号 -->
          <div class="empId">
            <span>员工编号</span>
            <el-input
              v-model="editData.userInfoNo"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 员工姓名 -->
          <div class="empId">
            <span>员工姓名</span>
            <el-input
              v-model="editData.userName"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 员工电话 -->
          <div class="empId">
            <span>员工电话</span>
            <el-input
              v-model="editData.userInfoPhone"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 性别 -->
          <div class="empPrin">
            <span>性别</span>
            <el-select v-model="editData.userInfoSex" placeholder="请选择">
              <el-option
                v-for="item in sex"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 所属部门 -->
          <div class="empId">
            <span>所属部门</span>
            <el-select v-model="editData.dept" placeholder="请选择">
              <el-option
                v-for="item in Dept"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 底部按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="editEmpFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="edit()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>


<script>
import {
  getEmpInfo,
  queryEmp,
  addNewEmp,
  removeEmp,
  editEmp,
} from "@/api/EmpAPI";
import { getAllDeptName } from "@/api/deptAPI";
export default {
  name: "employeeManager",
  data() {
    return {
      // 表格数据
      tableData: [
        {
          User: {
            userInfoId: "",
            userInfoNo: "",
            userName: "",
            userInfoSex: "",
            userInfoEntryTime: "",
          },
          Dept: {
            deptName: "",
          },
        },
      ],

      // 添加员工信息
      addData: {
        userInfoNo: "",
        userName: "",
        userInfoSex: "",
        dept: "",
        userInfoPhone: "",
        userInfoEntryTime: "",
      },
      // 所有部门信息
      Dept: [],
      // 修改员工信息
      editData: {
        userInfoId: "",
        userInfoNo: "",
        userName: "",
        userInfoSex: "",
        dept: "",
        userInfoPhone: "",
        userInfoEntryTime: "",
      },
      // 添加员工弹窗是否显示
      addEmpFormVisible: false,
      // 修改员工信息弹窗
      editEmpFormVisible: false,
      // 顶部查询员工
      selectName: "",
      selectDept: "",
      // 性别
      sex: [
        {
          value: "男",
          label: "男",
        },
        {
          value: "女",
          label: "女",
        },
      ],
      detailList: [],
      assignGroupSearch: {
        pageNo: 1, // 页数
        rows: 10, // 每页展示条数
        total: 0, // 总数
      },
    };
  },
  methods: {
    // 获取员工信息
    getInfoByPage: function () {
      getEmpInfo().then((res) => {
        if (res.code === 200) {
          this.detailList = res.data;
          this.assignGroupSearch.total = res.data.length;
        }
      });
    },
    // 获取所有部门
    getAllDept: function () {
      getAllDeptName().then((res) => {
        if (res.code === 200) {
          this.Dept = res.data;
        }
      });
    },
    // 模糊查询员工信息
    queryemp: function () {
      if (this.selectName != "" || this.selectDept != "") {
        queryEmp(this.selectName, this.selectDept).then((res) => {
          if (res.code === 200) {
            this.tableData = res.data;
          }
        });
      } else {
        this.getInfoByPage(0);
      }
    },
    // 添加员工信息
    addEmp: function () {
      if (
        this.addData.userInfoNo == "" ||
        this.addData.userInfoEntryTime == "" ||
        this.addData.userInfoPhone == "" ||
        this.addData.userName == "" ||
        this.addData.userInfoSex == "" ||
        this.addData.dept == ""
      ) {
        this.$message({
          message: "请完善员工信息",
          type: "warning",
        });
        return;
      }
      let sex = 0;
      if (this.addData.userInfoSex == "男") {
        this.addData.userInfoSex = 1;
      } else {
        this.addData.userInfoSex = 0;
      }
      // 添加
      addNewEmp(this.addData).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.addEmpFormVisible = false;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 删除员工信息
    deleteEmp: function (index) {
      removeEmp(this.tableData[index].User.userInfoId).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.tableData.splice(index, 1);
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
    },
    // 点击编辑按钮
    clickEdit: function (index) {
      this.editData.userInfoId = this.tableData[index].User.userInfoId;
      this.editData.userInfoNo = this.tableData[index].User.userInfoNo;
      this.editData.userName = this.tableData[index].User.userName;
      this.editData.userInfoSex =
        this.tableData[index].User.userInfoSex == 1 ? "男" : "女";
      this.editData.userInfoEntryTime =
        this.tableData[index].User.userInfoEntryTime;
      this.editData.dept = this.tableData[index].Dept.deptName;
      this.editData.userInfoPhone = this.tableData[index].User.userInfoPhone;
      this.editEmpFormVisible = true;
    },
    // 修改员工信息
    edit: function () {
      if (
        this.editData.userInfoNo == "" ||
        this.editData.userName == "" ||
        this.editData.userInfoSex == "" ||
        this.editData.userInfoPhone == "" ||
        this.editData.dept == ""
      ) {
        this.$message({
          message: "请完善信息",
          type: "warning",
        });
        return;
      }
      if (this.editData.userInfoSex == "男") {
        this.editData.userInfoSex = 1;
      } else {
        this.editData.userInfoSex = 0;
      }
      editEmp(this.editData).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.editEmpFormVisible = false;
          this.getInfoByPage(0);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 跳页
    tableCurrentChange(e) {
      this.assignGroupSearch.pageNo = e;
      this.getInfoByPage();
      setTimeout(() => {
        this.tableData = this.detailList.slice((e - 1) * 10, e * 10);
      }, 500);
    },
    // 每页展示条数变更
    tableSizeChange(e) {
      this.assignGroupSearch.rows = e;
      this.assignGroupSearch.pageNo = 1;
      this.getInfoByPage();
      setTimeout(() => {
        this.tableData = this.detailList.slice(0, 10);
      }, 500);
    },
  },
  mounted() {
    this.getInfoByPage();
    setTimeout(() => {
      this.tableData = this.detailList.slice(0, 10);
    }, 500);
    this.getAllDept();
  },
};
</script>

<style lang="less" scoped>
#emp {
  .header {
    background-color: deepskyblue;
    display: flex;
    height: 30px;
    align-items: center;
  }
  // 内容
  .empInner {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 50px;
    .addEmp {
      display: flex;
      flex-direction: row;
      justify-content: start;
      .name,
      .dept {
        margin-right: 20px;
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
      }

      .el-input {
        width: 200px;
      }
    }
    .newemp {
      margin-top: 20px;
      width: 90px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      i {
        font-size: 20px;
        margin-right: 2px;
      }
    }
    .table {
      margin-top: 20px;
      ::v-deep .el-table th {
        background-color: bisque;
      }
      ::v-deep .el-table__cell {
        border: 3px double gray;
      }
      ::v-deep .el-table__cell.gutter {
        background-color: white;
        border: none;
      }
      .tableBtn {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }
    }
    .addForm {
      display: flex;
      flex-direction: column;
      .el-input {
        width: 496px;
      }
      .empId,
      .empPrin {
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .el-input,
        .el-select {
          margin-left: 30px;
        }
      }
      .empPrin {
        .el-select {
          margin-left: 58px;
        }
      }
    }
  }
}
</style>